<template>
    <div class="listBox">
        <van-nav-bar title="车辆列表" left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="busList">
            <div class="busOne" v-for="item in busList" :key="item.id">
                <div class="handle">
                    <span class="update" @click="updateInfo">修改</span>
                    <span class="del" @click="delById(item.id)">删除</span>
                </div>
                <van-overlay :show="show" @click="shadow">
                    <div class="wrapper">
                        <div class="block" @click.stop>
                            <van-form @submit="onSubmit(item)">
                                <van-field v-model="plateNo" name="plateNo" label="车牌" placeholder="车牌"
                                    :rules="[{ pattern: /^[\u4e00-\u9fa5]{1}[A-Z][0-9]{6}$/, message: '车牌输入有误' }]" />
                                <van-field v-model="type" name="type" label="车型" placeholder="请输入汽油车或者新能源车"
                                    :rules="[{ required: true, message: '请填写车型' }]" />
                                <div style="margin: 16px;">
                                    <van-button round block type="info" native-type="submit">更新</van-button>
                                </div>
                            </van-form>
                        </div>
                    </div>
                </van-overlay>
                <p>
                    车牌号 : {{item.plateNo}}
                </p>
                <p>
                    类&emsp;型 : {{item.type}}
                </p>
            </div>
        </div>
    </div>
</template>
<script>
import nav from "@/mixin/nav";
import { stopMyCar, stopDelCar, stopUpdateCar } from "@/service/stop/stopService";
export default {
    mixins: [nav],
    data() {
        return {
            busList: [],
            show: false,
            plateNo: "",
            type: "",
        }
    },
    async created() {
        this.queryBus();
    },
    methods: {
        async queryBus() {
            let { data } = await stopMyCar();
            console.log(data);
            this.busList = data.rows;
        },
        shadow() {
            this.show = false;
        },
        onClickLeft() {
            this.$router.go(-1);
        },
        async delById(id) {
            this.$dialog.confirm({
                message: "确认删除吗?",
            }).then(async () => {
                let { data } = await stopDelCar(id);
                console.log(data);
                if (data.code == 200) {
                    this.$toast.success("删除成功");
                    this.queryBus();
                } else {
                    this.$toast.fail(data.msg);
                }
            }).catch(() => {

            })
        },
        updateInfo() {
            this.show = true;
        },
        async onSubmit(item) {
            let { data } = await stopUpdateCar({
                id: item.id,
                plateNo: this.plateNo,
                type: this.type,
            })
            this.show = false;
            console.log(data);
            if (data.code == 200) {
                this.$toast.success("修改成功!");
                this.queryBus();
            } else {
                this.$toast.fail(data.msg);
            }
        }
    }
}

</script>
<style scoped lang="scss">
body {
    height: 100%;
}

.listBox {
    height: 100%;
    background-color: #EDEDED;
}

.busOne {
    margin: 10px;
    background-color: #fff;
    border-radius: 10px;
    padding: 10px;
    position: relative;

    .handle {
        position: absolute;
        top: 16px;
        right: 20px;
        color: rgb(142, 142, 247);

        span {
            margin: 5px;
        }
    }
}

.wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.block {
    background-color: #fff;
    padding: 10px;
    border-radius: 5px;
}
</style>